
@font-face {
  font-family: "PMZD";
  src: url("~@/assets/font/pmzd.ttf");
}
.pmzd {
  font-family: "PMZD";
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.curClass{
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  overflow: hidden;
  color: #d8eefd;
  background: url("~@/assets/images/bigScreen/gisMap/bg.png") no-repeat center;
  background-size: 100% 100%;
  .main {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .mainBox {
      flex: 1;
      overflow: hidden;
      #map {
        height: 100%;
      }
    }
    .leftBox,.rightBox{
      position: relative;
      display: flex;
      z-index: 2;
      width: 900px;
      padding: 20px;
      color: #fff;
    }
    .c-1 {
      overflow: hidden;
      flex-grow: 0;
      flex-shrink: 0;
      .r-1 {
        width: 100%;
        height: calc(66% - 12px);
        margin-bottom: 12px;
      }
      .r-2 {
        width: 100%;
        height: calc(34%);
      }
    }
    .c-2 {
      overflow: hidden;
      flex-grow: 0;
      flex-shrink: 0;
      .r-1 {
        width: 100%;
        height: calc(33% - 12px);
        margin-bottom: 12px;
      }
      .r-2 {
        width: 100%;
        height: calc(33% - 12px);
        margin-bottom: 12px;
      }
      .r-3 {
        width: 100%;
        height: 34%;
      }
    }
    .leftBox .c-2 {
      margin-left: 20px;
    }
    .rightBox .c-2 {
      margin-left: 20px;
    }
  }
}
// 驾驶舱
.container {
  padding: 82px 0 0 0;
  .head {
    height: 82px;
    width: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    background-size: 100% 100%;
    background: url("~@/assets/images/bigScreen/gisMap/head.png") no-repeat center;
    .left {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      margin-top:-25px;
      .item {
        margin-right: 20px;
        img {
          display: inline-block;
          vertical-align: middle;
          margin-right: 4px;
        }
      }
    }
  }
  .main {
    .leftBox,
    .rightBox {
      width: 900px;
      padding: 20px;
      transition: all 0.3s;
    }
    .c-1 {
      width: 440px;
      transition: width 0.3s;
    }
    .c-2 {
      width: 440px;
      transition: width 0.3s;
      .r-1 {
        height: calc(33% - 12px);
        margin-bottom: 12px;
      }
      .r-2 {
        height: calc(33% - 12px);
        margin-bottom: 12px;
      }
      .r-3 {
        height: 34%;
      }
    }
    .leftBox .c-2 {
      transition: all 0.3s;
    }
    .rightBox .c-2 {
      transition: all 0.3s;
    }
  }
}
// 销售运行分析
.salesforce{
  padding: 0;
  width: 100%;
  ::v-deep{
    .main{
      // padding: 20px;
      .leftBox,
      .rightBox {
        width: calc(50% - 30px);
      }
      .leftBox{
        padding-right: 0;
      }
      .rightBox{
        margin-left: 20px;
        padding-left: 0;
      }
      .c-1{
        width: calc(50% - 10px);
      }
      .c-2{
        width: calc(50% - 10px);
      }
    }
    .leftBox .c-2 {
      transition: none;
    }
    .rightBox .c-2 {
      transition: none;
    }
  }
}
.gisMap{
  padding: 15px;
  ::v-deep{
    .main{
      .leftBox,
      .rightBox {
        width: 0;
        padding: 0;
      }
    }
    .tj-layout {
      left: 15px !important;
      top: 10px;
      .item{
        margin-bottom: 6px !important;
      }
    }
  }

}
.block {
  position: relative;
  .b-header {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    height: 59px;
    background: url("~@/assets/images/bigScreen/gisMap/xsjd.png") no-repeat center;
    background-size: 100% 100%;
    &.xsjd {
      background-image: url("~@/assets/images/bigScreen/gisMap/xsjd-1.png");
    }
    &.spjk {
      background-image: url("~@/assets/images/bigScreen/gisMap/spjk.png");
    }
    &.trqxsjg {
      background-image: url("~@/assets/images/bigScreen/gisMap/trqxsjg.png");
    }
    &.gqzbtj {
      background-image: url("~@/assets/images/bigScreen/gisMap/gqzbtj.png");
    }
    &.zgrwqd {
      background-image: url("~@/assets/images/bigScreen/gisMap/zgrwqd.png");
    }
    &.xszxqk {
      background-image: url("~@/assets/images/bigScreen/gisMap/xszxqk.png");
    }
    &.cxyb {
      background-image: url("~@/assets/images/bigScreen/gisMap/cxyb.png");
    }
    &.jgyxqk {
      background-image: url("~@/assets/images/bigScreen/gisMap/jgyxqk.png");
    }
    &.xsyxqk {
      background-image: url("~@/assets/images/bigScreen/gisMap/xsyxqk.png");
    }
    &.ycfx {
      background-image: url("~@/assets/images/bigScreen/gisMap/ycfx.png");
    }
    &.rsstj {
      background-image: url("~@/assets/images/bigScreen/gisMap/rsstj.png");
    }
    &.khyj {
      background-image: url("~@/assets/images/bigScreen/gisMap/khyj.png");
    }
    &.wctj {
      background-image: url("~@/assets/images/bigScreen/gisMap/wctj.png");
    }
  }
  .b-body {
    height: 100%;
    width: 100%;
    padding-top: 50px;
    box-sizing: border-box;
    background: url("~@/assets/images/bigScreen/gisMap/body-bg.png") no-repeat center;
    background-size: 100% 100%;
    .body-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 15px;
      padding-top: 0;
      .left {
        span {
          font-size: 24px;
        }
      }
      .right {

      }
    }

    .chart-title {
      width: 180px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      margin: 0 auto;
      font-weight: bold;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(105, 254, 255, 0.2),
        transparent
      );
    }
  }
}
.select {
  position:absolute;
  right:0;
  top:0;
  z-index:2;
}
.setting {
  z-index:3;
}
.b {
  &.el-input{
    width: auto;
  }
  &.el-range-editor{
    background-color: transparent;
    border: none;
    width: auto;
    z-index: 2;
    padding:0;
    height:20px;
  }
  ::v-deep{
    .el-range-separator{
      color: #fff;
    }
    .el-input__inner,.el-range-input{
      width: 80px;
      padding-right: 0;
      padding-left: 0;
      // height: 32px;
      // line-height: 32px;
      height: 20px;
      line-height: 20px;
      font-size:12px;
      padding:0;
      border: none;
      border-radius: 0;
      text-align: center;
      background: url("~@/assets/images/bigScreen/gisMap/b.png") no-repeat center;
      background-size: 100% 100%;
      color: #ffffff;

    }
    .el-input__prefix,.el-input__icon{
      display: none;
    }
  }
}
.chart {
  width: 100%;
  height: 100%;
}

.pie-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 24px;
  white-space: nowrap;
  padding-bottom: 0;
  .pie {
    position: relative;
    margin-right: 40px;
    .val {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      .v {
        font-size: 20px;
      }
    }
  }
  .static {
    .s-item {
      margin-bottom: 14px;
      vertical-align: bottom;
      span {
        display: inline-block;
        font-size: 26px;
      }
    }
  }
}
.l11-table-layout {
  flex: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 5px;
  padding-top: 0;
  .table-head {
    height: 30px;
    width: 90px;
    line-height: 30px;
    text-align: center;
    box-shadow: inset 0 0 24px rgba(1, 106, 199, 0.8);
    margin: 0 auto;
  }
  .inner {
    flex: 1;
    overflow: auto;
  }
  .el-table:before{
    height: 1px;
  }
}
.chart-group {
  padding: 0 10px;
  .chart-row {
    height: calc(50% - 5px);
    display: flex;
    margin-top: 5px;
    .chart-item {
      flex: 1;
      position: relative;
      .item-title {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        text-align: center;
        font-size: 13px;
      }
      .chart {
        padding-top: 30px;
        box-sizing: border-box;
      }
    }
  }
}
.arrow-layout {
  position: absolute;
  bottom: 20px;
  z-index: 100;
  width: 34px;
  height: 30px;
  background: #0d264a;
  padding: 10px;
  transition: all 0.3s;
  cursor: pointer;
  img {
    transform: rotate(0deg);
    transition: all 0.3s;
  }
}
.leftBox .arrow-layout {
  right: 0;
  margin-right: -54px;
  border-radius: 0 8px 8px 0;
}
.rightBox .arrow-layout {
  left: 0;
  margin-left: -54px;
  border-radius: 8px 0 0 8px;
}
::v-deep {
  .el-carousel__container {
    height: inherit;
  }
  .el-table thead .el-table__cell {
    background: none !important;
  }
  .el-table thead {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(0, 110, 204, 0.97),
      transparent
    );
  }
  .el-table.mini-lineHeight {
    td.el-table__cell {
      padding: 0 !important;
      border-color: #287ebf !important;
    }
    .el-progress-bar__outer,
    .el-progress-bar__inner {
      border-radius: 0;
    }
  }
  .el-table.noBorder th.el-table__cell.is-leaf,.el-table.noBorder td.el-table__cell{
    border-bottom: none !important;
  }

}
.swipper {
  width: 100%;
  height: 100%;
  background: url("~@/assets/images/bigScreen/gisMap/swipper.png") no-repeat center;
  background-size: cover;
}

.closeLeft.leftBox {
  width: 440px !important;
  .c-2 {
    width: 0;
    margin-left: 0;
  }
  .arrow-layout {
    img {
      transform: rotate(180deg);
    }
  }
}

.closeRight.rightBox {
    width: 440px !important;
    .c-1 {
      width: 0;
    }
    .c-2 {
      margin-left: 0 !important;
    }
    .arrow-layout {
      img {
        transform: rotate(-180deg);
      }
    }
  }

.setting,
.more {
  position:absolute;
  top:2px;
  right:8px;
  width:16px;
  height:16px;
  background:url('~@/assets/images/bigScreen/gisMap/setting.png') no-repeat center;
  background-size:100% 100%;
  cursor:pointer;
  z-index:10;
}
.more {
  background-image: url('~@/assets/images/bigScreen/gisMap/more.png');
}

